<template>
	<view>
		<view class="address-info">
			<view class="top-title">收货地址</view>
			<navigator open-type="navigate" :url="'/pages/user/settings/address/address?type=entrust' + '&goods_id=' + goods_id" class="cont address-cont flex">
				<view class="info" v-if="isAddress">
					<view class="name">{{addressData.realname}}&nbsp;&nbsp;{{addressData.mobile}}</view>
					<view class="ad-text">{{addressData.province_text+addressData.city_text+addressData.zone_text+addressData.address}}</view>
				</view>
				<view class="noad-text" v-else>点击添加收货地址</view>
				<arrow size="50" color="#656565" direction="right"></arrow>
			</navigator>
		</view>
		<view class="prod-info">
			<view class="top-title">产品信息</view>
			<view class="cont">
				<view class="prod flex">
					<view class="pic"><image :src="data.photo" mode="aspectFit"></image></view>
					<view class="info">
						<view class="text name">{{data.goods_name}}</view><view class="text">￥{{data.order_total}}</view>
					</view>
				</view> 
				<view class="describe" v-if="data.content">
					<view class="s-title">宝贝描述</view>
					<view class="text">{{data.content}}</view>
				</view> 
				<view class="parameter" v-if="data.other_attr||data.attr">
					<view class="s-title">宝贝参数</view>
					<view class="list" v-if="data.attr">
						<view class="type" v-for="(item,index) in data.attr" :key="index" v-if="item.items != ''">{{item.name}}：{{item.items}}</view>
					</view>
					<view class="items" v-if="data.other_attr">
						<text v-for="(item,idx) in data.other_attr" :key="idx">{{item}}</text>
					</view>
				</view> 
			</view>
		</view>
		<view class="store-info">
			<view class="top-title">商家信息</view>
			<view class="cont store-cont flex">
				<view class="pic"><image :src="data.seller_logo"></image></view>
				<view class="info">
					<view class="name">{{data.seller_name}}</view>
				</view>
			</view>
		</view>
		
		<view class="price-info cont">
			<view class="item flex">
				<text class="name">商品总价</text><text class="num">￥{{data.order_total}}</text>
			</view>
			<view class="item flex">
				<text class="name">运费</text><text class="num">￥{{data.postage}}</text>
			</view>
		</view>
		<view class="footerHight"></view>
		<view class="pay-btn" @tap="payBtn">我要委托</view>
		
		<view class="m-loading" v-if="showLoading">
			<image src="../../static/images/loading.gif" mode="widthFix"></image>
		</view>
	</view>
</template>

<script>
	import henglang from '@/common/common.js';
	export default {
		data() {
			return {
				showLoading: false,
				data:{},
				isAddress:true,
				addressId:'',
				addressData:{},
				goods_id:''
			}
		},
		methods: {
			payBtn(){
				let that = this;
				that.showLoading = true;
				var loadData = {
					buy_num: 1,
					goods_id:that.goods_id,
					address_id:that.addressId
				};
				henglang.post('transfer_order/order', loadData, true, function (res){
					that.showLoading = false;
					let data = res.data;
					if(data.code =='-1'){
						henglang.showToast(data.msg, 1500);
					}else if(data.code == '-2'){	// 如果订单信息不存在，返回首页
						setTimeout(function (){
							uni.switchTab({
								url: '/pages/jewel/index/index'
							})
						}, 1000)
					}else{
						uni.redirectTo({
							url:'/pages/transfer/publish_success?pageTpye=orderOK'
						})
					}
				})
				
			}
		},
		onLoad(options) {
			let that = this
			let data = {}
			that.goods_id = options.goods_id
			that.showLoading = true
			henglang.get('transfer_order/getOrderInfo',{goods_id: options.goods_id},true,function(res){
				that.data = res.data.data
			});
			if (options.address_id) { // 从收货地址页传来的地址id
			    that.addressId = options.address_id;
				henglang.get('member/address_view',{id: options.address_id},true,function(res){
					that.addressData = res.data.data;
				});
			} else { // 没有地址id
				henglang.get('member/address',{},true,function(res){
					if (!res.data.data.length) {
					    that.showLoading = false;
						that.isAddress = false
					    return false;
					}
					that.addressData = res.data.data[0];
					that.addressId = that.addressData.id;
				});
			}
			that.showLoading = false
		}
	};
</script>

<style>
	.top-title{
		background: #f3f3f3;
		color: #a2a2a2;
		font-size: 32rpx;
		line-height: 75rpx;
		padding: 0 36rpx;
	}
	.s-title{
		color: #333333;
		font-size: 32rpx;
		padding-top: 23rpx;
		border-top: 1px solid #e8e8e8;
		padding-bottom: 15rpx;
	}
	.cont{
		padding: 0 36rpx;
	}
	.flex{
		display: flex;
		align-items: center;
	}
	.address-cont{
		justify-content: space-between;
	}
	.address-cont .item{
		line-height: 84rpx;
		border-bottom: 1px solid #e8e8e8;
		color: #323232;
		font-size: 28rpx;
	}
	.address-cont .item text:first-child{
		margin-right: 60rpx;
	}
	.address-cont .item input{
		width: 450rpx;
	}
	.address-cont .info{
		width: 600rpx;
		padding: 30rpx 0;
	}
	.address-cont .name{
		color: #1a1a1a;
		font-size: 30rpx;
		margin-bottom: 10rpx;
	}
	.address-cont .ad-text{
		color: #757575;
		font-size: 28rpx;
		line-height: 38rpx;
		width: 100%;
		word-wrap: break-word;
		word-break: normal;
		max-height: 76rpx;
		overflow: hidden;
	}
	.address-cont .noad-text{
		color: #757575;
		font-size: 28rpx;
		padding: 40rpx 0;
		display: block;
	}
	.prod-info .prod{
		padding: 28rpx 0;
	}
	.prod-info .prod .pic{
		width: 144rpx;
		height: 144rpx;
		overflow: hidden;
		border: 1px solid #858585;
		border-radius: 10rpx;
		margin-right: 22rpx;
	}
	.prod-info .prod .pic image{
		width: 100%;
		height: 100%;
		display: block;
	}
	.prod-info .prod .info .text{
		color: #4c4c4c;
		font-size: 34rpx;
	}
	.prod-info .prod .info .name{
		line-height: 44rpx;
		max-height: 88rpx;
		overflow: hidden;
		margin-bottom: 10rpx;
		width: 480rpx;
	}
	.prod-info .describe{
		padding-bottom: 23rpx;
	}
	.prod-info .describe .text{
		color: #666666;
		font-size: 28rpx;
	}
	.prod-info .parameter .list{
		display: flex;
		flex-wrap:wrap;
	}
	.prod-info .parameter .list .type{
		color: #666666;
		font-size: 28rpx;
		margin-right: 80rpx;
		margin-bottom: 10rpx;
	}
	.prod-info .parameter .items{
		display: flex;
		flex-wrap: wrap;
		padding-bottom: 35rpx;
		padding-top: 10rpx;
	}
	.prod-info .parameter .items text{
		color: #666666;
		font-size: 28rpx;
		border: 1px solid #4c4b4b;
		line-height: 38rpx;
		border-radius: 8rpx;
		padding: 0 12rpx;
		margin-right: 15rpx;
	}
	.store-info{
		border-bottom: 20rpx solid #f3f3f3;
	}
	.store-info .store-cont{
		padding: 36rpx;
	}
	.store-info .store-cont .pic{
		width: 100rpx;
		height: 100rpx;
		padding: 0 2rpx 4rpx 2rpx;
		background: #FFFFFF;
		box-shadow:0px 3px 4px rgba(180,180,180,.59);
		border-radius: 50%;
		overflow: hidden;
		margin-right: 24rpx;
	}
	.store-info .store-cont .pic image{
		width: 100%;
		height: 100%;
		border-radius: 50%;
		display: block;
	}
	.store-info .store-cont .info .name{
		color: #4c4c4c;
		font-size: 34rpx;
		padding-bottom: 5rpx;
	}
	.store-info .store-cont .info .ad{
		color: #4c4c4c;
		font-size: 26rpx;
	}
	.trust-info .trust-cont .top-text{
		padding-top: 30rpx;
		padding-bottom: 60rpx;
	}
	.trust-info .trust-cont .top-text text{
		color: #4d4d4d;
		font-size: 28rpx;
		display: block;
	}
	.trust-info{
		border-bottom: 10rpx solid #f3f3f3;
	}
	.trust-info .timement .info{
		display: flex;
		justify-content: space-between;
		width: 630rpx;
		margin: 0 auto;
		padding-bottom: 30rpx;
	}
	.trust-info .timement .line{
		width: 570rpx;
		margin: 0 auto;
		background: #dfdfdf;
		height: 5rpx;
		margin-bottom: 28rpx;
		display: flex;
		justify-content: space-between;
	}
	.trust-info .timement .line .icon{
		width: 18rpx;
		height: 18rpx;
		background: #dfdfdf;
		border-radius: 50%;
		margin-top: -6rpx;
	}
	.trust-info .timement .line .big{
		width: 22rpx;
		height: 22rpx;
		margin-top: -10rpx;
	}
	.trust-info .timement .line .on{
		background: #e93a3a;
		position: relative;
	}
	.trust-info .timement .line .on:after{
		content: '';
		position: absolute;
		top: 50%;
		left: 50%;
		margin-top: -19rpx;
		margin-left: -18rpx;
		width: 36rpx;
		height: 36rpx;
		background: rgba(233,58,58,.7);
		border-radius: 50%;
	}
	
	.trust-info .timement .info .item .pic image{
		width: 82rpx;
		height: 82rpx;
		display: block;
		border-radius: 50%;
		box-shadow:0px 3px 4px rgba(180,180,180,.59);
	}
	.trust-info .timement .info .item .name{
		color: #656161;
		font-size: 30rpx;
		text-align: center;
		display: block;
		padding-top: 6rpx;
	}
	.price-info .item{
		justify-content: space-between;
		line-height: 80rpx;
		border-bottom: 1px solid #e8e8e8;
	}
	.price-info .item text{
		color: #4d4d4d;
		font-size: 32rpx;
	}
	.footerHight{
		width: 100%;
		height: 140rpx;
	}
	.pay-btn{
		position: fixed;
		bottom: 0;
		left: 0;
		width: 100%;
		line-height: 108rpx;
		background: #f47a7a;
		text-align: center;
		color: #FFFFFF;
		font-size: 32rpx;
		font-weight: bold;
	}
	
</style>
